<!-- 组件说明 -->
<template>
  <div class="wrapper">
    <ul class="content">
      <li v-for="(item,index) of 55" :key="index">{{index}}</li>
     
    </ul>
    <!-- 这里可以放一些其它的 DOM，但是会被忽略，且不会影响content部分滚动 -->
  </div>
  
  
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    name: "Category",
    components: {

    },
    data () {
      return {
          
      };
    },
    computed: {

    },
    methods: {

    },

    
    created() {
      //不可以在created中绑定元素
      
    },
    mounted() {
        //默认情况下bscroll是不能实时监听滚动位置
      const bscroll = new BScroll('.wrapper', {
        //probe侦测，0，1都是不侦测，2是手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测，3只要是滚动都侦测
        probeType: 2,//实时监听时使用
        click: true,//不开启click则按钮的点击事件无效
        pullUpLoad: true,//开启上拉加载
      });
      // bscroll.on('scroll', (position) => {
      //   console.log(position)
      // })
      bscroll.on('pullingUp', () => {
        console.log('上拉加载')
        //发送网络请求，请求更多页的数据
        //等数据请求完成，并且将新的数据展示出来后
        //为了能进行下一次上拉加载更大，必须调用bscroll.finishPullUp
        setTimeout(() => {
          bscroll.finishPullUp()
        },2000)
      })
    }
  }
</script>

<style  scoped>
  

  .wrapper {
    height: 200px;
    background-color: red;
    overflow: hidden;
   
    
  }
</style>